<template>
  <div class="source-box">
    <div class="source-box-top">
      <h3>用户端口来源</h3>
    </div>
    <div class="source-box-bot">
      <div
        ref="_chart"
        class="echar"
      />
    </div>
  </div>
</template>
<script>
import { getPortData } from '@/api/statistics.js'
import { async } from 'q'
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          type: 'plain',
          orient: 'vertical',
          right: '20%',
          top: 40,
          data: [],
          itemGap: 50
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            center: ['40%', '50%'],
            radius: ['50%', '70%'],
            clockwise: false,
            avoidLabelOverlap: false,
            label: {
              normal: {
                formatter: '{d}%',
                show: true,
                position: 'outter'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                length: 50,
                length2: 100,
                show: true
              }
            },
            data: []
          }
        ]
      },
      myChart: null,
      colorList: ['#5994FF', '#9F6BFF', '#EED549', '#FF8B8B', '#57E7CA']
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  created() {
    getPortData().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        this.option.series[0].data.push({
          value: res.data[i].sourceCount,
          name: res.data[i].userSource,
          itemStyle: {
            color: this.colorList[i]
          }
        })
        this.option.legend.data.push({
          name: res.data[i].userSource,
          icon: 'circle'
        })
      }
      this.init()
    })
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs._chart)
      this.myChart.setOption({ ...this.option })
    }
  }
}
</script>
